<template>
  <div
    :class="['flex items-center text-xl font-mono cursor-pointer h-12', getTextSizeName(size), className]"
    @click="handleClick"
  >
    <img
      :class="getImageSizeName(size)"
      :src="logo"
      alt=""
    />
    <span
      v-if="type === 'full'"
      :class="['tracking-wider bg-clip-text text-sky-300 bg-gradient-to-rfrom-sky-300 to-sky-600 font-semibold',getTextSizeName(size)]"
    >
      Electron Excalidarw
    </span>
  </div>
</template>

<script setup>
import logo from '@renderer/assets/logo.png'
import { defineProps } from 'vue';

const props = defineProps({
  className: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: 'small',
  },
  url: String,
  type: {
    type: String,
    default: 'full',
  },
  onClick: Function,
});

const getTextSizeName = (size) => {
  switch (size) {
    case 'small':
      return 'text-xl';
    case 'middle':
      return 'text-3xl';
    case 'large':
      return 'text-5xl';
  }
};

const getImageSizeName = (size) => {
  switch (size) {
    case 'small':
      return 'w-6 h-6 mr-0.5';
    case 'middle':
      return 'w-10 h-10 mr-75';
    case 'large':
      return 'w-16 h-16 mr-1';
  }
};

const handleClick = () => {
  if (props.onClick) {
    props.onClick();
  }
  if (props.url) {
    window.open(props.url);
  }
};
</script>

<style scoped>
</style>
